/**
 * ethanschoonover.com master css file
 * fold in vim to view only the non html5boilerplate components
 *
 * style.css contains a reset, font normalization and some base styles. {{{
 *
 * See html5boilerplate.com for the base css file
 * Credit is left where credit is due.
 * Much inspiration was taken from these projects:
 * - yui.yahooapis.com/2.8.1/build/base/base.css
 * - camendesign.com/design/
 * - praegnanz.de/weblog/htmlcssjs-kickstart
 */


/**
 * Primary styles (custom section, non htmlboilerplate)
 * Author: Ethan Schoonover
 */


$fontstack: "ff-din-web-pro-1","ff-din-web-pro-2",sans-serif;
$hmargin:   70px;
$vmargin:   20px;

/*
Font Sizing Hack via
http://html5boilerblate.com and
http://developer.yahoo.com/yui/fonts/
=====================================
target size     Declare this
in pixels (px)  percent (%)
10              77
11              85
12              93 (was 93)
13              100
14              108 (was 107)
15              116 (was 114)
16              123.1 (was 122)
17              131 (was 129)
18              138.5 (was 136)
19              146.5 (was 144)
20              153.9 (was 152)
21              161.6 (was 159)
22              167
23              174
24              182
25              189
26              197
*/
html * {
    font-family: $fontstack;
}
html > * {
    //font-size: 123.1%;
}
p,dt,li {
    //font-size: 146.5%;
    //font-size: 153.9%;
}
p {
    font-family: $fontstack;
    font-weight: lighter;
    margin: 0 0 $vmargin 0;
}
strong { font-weight: bold; }
em { }
ol,ul {
    margin-bottom: $vmargin;
}
li {
    margin-bottom: $vmargin/2;
}
li p {
   //margin-bottom: $vmargin/5;
}
li > p:first-of-type {
    //margin-bottom: $vmargin/2;
}
li > p:last-of-type {
    //margin-bottom: $vmargin;
}
dt {
    font-weight: bold;
}
dd {
    margin-left: $hmargin/2;
}
h1,h2,h3,h4,h5,h6 {
    font-family: $fontstack;
    font-weight: lighter;
    text-transform: capitalize;
    margin-top:$vmargin*2;
    margin-bottom:$vmargin;
}
h1 {
    text-transform: uppercase;
    font-weight: bold;
    border-bottom:1px solid;
}
h2 {
    border-bottom:1px solid;
}
h3,h4,h5,h6 {
    border-bottom:none;
}
h1#pagetitle, h1:first-of-type {
    font-size: 700%;
    //font-size: 600%;
    margin-top:0;
    margin-bottom:$vmargin;
    line-height: 100%;
    border: none;
    text-decoration: none;
}
h2#pagesubtitle, h2:first-of-type {
    font-weight: lighter;
    font-size: 200%;
    text-transform: none;
    color: $base01;
    margin-top:$vmargin;
    margin-bottom:$vmargin*2;
    line-height: 100%;
    border: none;
}
/*
h1 { font-size: 153.9% }      //26px
h2 { font-size: 153.9% }      //23px
h3 { font-size: 146.5% }    //20px
h4 { font-size: 138.5% }      //18px
h5 { font-size: 138.5% }      //18px
h6 { font-size: 138.5% }      //18px
*/
h1 { font-size: 153.9% }      //26px
h2 { font-size: 153.9% }      //23px
h3 { font-size: 146.5% }    //20px
h4 { font-size: 138.5% }      //18px
h5 { font-size: 138.5% }      //18px
h6 { font-size: 138.5% }      //18px
img { margin: 0 0 $vmargin 0; }
header {
    //font-size: 123.1% ;
    line-height: 190%;
    a {
        text-decoration:none;
        margin-right: 10px;
    }
}
footer {
    padding-left:$hmargin;
    //background-color:$base02;
    line-height:200%;
    //position:absolute;
    //bottom:0;
    padding-right:1em;
}
#main {
    margin-left:$hmargin;
    margin-right:$hmargin;
    margin-top:$vmargin*2;
    margin-bottom:$vmargin*2;
    //min-width: 52em; // sufficient for 80 char pre blocks
    min-width: 32em; // sufficient for 72 char pre blocks
    max-width: 52em;
}
#sitelink{
    display:block;
    float:left;
    width: $hmargin - 10px;
    padding-left: 10px;
}
pre {
    margin-bottom:$vmargin;
}
pre, code {
    font-family: monospace;
}
pre {
}
/*code {
    font-size: 75%;
}*/
table {
    font-size: 75%;
}
th {
    padding-bottom: .7em;
    padding-right: 1.8em;
}
td {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    padding-left: .2em;
    padding-right: 1.8em;
}
td.nums {
}

h2#download + h3 {
    font-weight:bold;
    text-decoration:none;
    padding-left:70px;
    background-repeat: no-repeat;
    background-position: left;
    height: 60px;
    display:block;
    line-height: 60px;
    background-image: url("/img/download-base00.png");
    color:red;
}

@mixin rebase($rebase03,$rebase02,$rebase01,$rebase00,$rebase0,$rebase1,$rebase2,$rebase3) 
{
    * { color:$rebase0; }
    body { background-color:$rebase03; }
    h1,h2,h3,h4,h5,h6 { color:$rebase1; border-color: $rebase0; }
    h1#pagetitle, h1:first-of-type { color: $rebase1; }
    h2#pagesubtitle, h2:first-of-type { color: $rebase01; }
    a, a:active, a:visited { color: $rebase1; }
    a:hover { background-color: $rebase02 }
    header {
        background-color: $rebase01;
        color: $rebase1;
        a.navlink, a:active.navlink, a:visited.navlink { color: $rebase1; }
        a:hover.navlink { background: transparent; color: $rebase02; }
        #sitelink { color: $rebase02; background-color: $rebase1 }
        a:hover#sitelink { font-weight: bold; }
    }
    footer {
        background-color: $rebase02;
        color: $rebase01;
    }
    pre {
        color: $rebase1;
        background-color: $rebase02;
    }
    tr:nth-child(odd) { background-color:$rebase02 }
    th { color:$rebase1; background-color:$rebase03; }
    h1 a:hover {
        -webkit-text-stroke: 3px $rebase02;
    }
    h2#download + h3 {
        background-image: url("/img/download-base00.png");
        color:$rebase0;
    }
}

@mixin accentize($accent) {
    a#sitelink{ background-color:$accent; }
    a, a:active, a:visited, code.url { color: $accent; }
    h1 {color:$accent}
    h2,h3,h4,h5,h6 {color:$accent}
    h1#pagetitle, h1:first-of-type { color: $accent; }
}

html, html.light { @include rebase($base3,$base2,$base1,$base0,$base00,$base01,$base02,$base03)}
html.dark  { @include rebase($base03,$base02,$base01,$base00,$base0,$base1,$base2,$base3)}

html * {
    color-profile: sRGB;
    rendering-intent: auto;
}

//TODO> put tone accents in rebase .base03{ @include accentize($base03) }
html.yellow, .yellow{
    @include accentize($yellow);
    h2#download + h3 {
        background-image: url("/img/download-yellow.png");
        color:$yellow;
    }
}
html.orange, .orange{
    @include accentize($orange);
    h2#download + h3 {
        background-image: url("/img/download-orange.png");
        color:$orange;
    }
}
html.red, .red{
    @include accentize($red);
    h2#download + h3 {
        background-image: url("/img/download-red.png");
        color:$red;
    }
}
html.magenta, .magenta{
    @include accentize($magenta);
    h2#download + h3 {
        background-image: url("/img/download-magenta.png");
        color:$magenta;
    }
}
html.violet, .violet{
    @include accentize($violet);
    h2#download + h3 {
        background-image: url("/img/download-violet.png");
        color:$violet;
    }
}
html.blue, .blue{
    @include accentize($blue);
    h2#download + h3 {
        background-image: url("/img/download-blue.png");
        color:$blue;
    }
}
html.cyan, .cyan{
    @include accentize($cyan);
    h2#download + h3 {
        background-image: url("/img/download-cyan.png");
        color:$cyan;
    }
}
html.green, .green{
    @include accentize($green);
    h2#download + h3 {
        background-image: url("/img/download-green.png");
        color:$green;
    }
}

// h1#pagetitle a, h1:first-of-type a,
// h2#pagesubtitle a, h2:first-of-type a,
h1 a, h2 a,
h1 a:hover, h2 a:hover {
    text-decoration: none;
    background: none;
}

/* highlighting-kate */

/* Based on kate's own default colors for Haskell */
pre.sourceCode, table.sourceCode, table.sourceCode * { font-family: monospace; }
code.sourceCode span.kw { color: $yellow; font-weight: bold; }
code.sourceCode span.dt { color: $cyan; }
code.sourceCode span.dv { color: $base01; }
code.sourceCode span.bn { color: $orange; }
code.sourceCode span.fl { color: $cyan; }
code.sourceCode span.ch { color: $red; }
code.sourceCode span.st { color: $magenta; }
code.sourceCode span.co { color: $base01; font-style: italic; }
code.sourceCode span.ot { }
code.sourceCode span.al { color: $green; font-weight: bold; }
code.sourceCode span.fu { color: $blue; }
code.sourceCode span.re { }
code.sourceCode span.er { color: $red; font-weight: bold; }


/**
 * Non-semantic helper classes: please define your styles before this {{{
 */

/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }



/**
 * Media queries for responsive design.
 *
 * These follow after primary styles so they will successfully override.
 */

@media all and (orientation:portrait) {
  /* Style adjustments for portrait mode goes here */

}

@media all and (orientation:landscape) {
  /* Style adjustments for landscape mode goes here */

}

/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
   consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {


  /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust */
  /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}


/**
 * Print styles.
 *
 * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
 */
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}

// }}}
